<template>
    <div>
      <h3 class="title">近期性能指标</h3>
      <div class="block">
        <el-date-picker
            v-model="value2"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
        </el-date-picker>
        <el-button type="primary" style="margin-left: 10px" @click="dc">确定</el-button>
      </div>
<!--      加个中文名-->
      <div class="outer">
        <div id="disk_container" style="height: 300px;width: 45%;float: left;">
          disk_used455
        </div>
        <div id="memory_container" style="height: 300px;width: 45%;float: left;margin-left: 10px">
          memory_used
        </div>
        <div id="totalCpu_container" style="height: 300px;width: 45%;float: left;margin-top: 20px;">
          CPU_total_percent
        </div>
        <div id="gpu_container" style="height: 300px;width: 45%;float: left;margin-top: 20px;margin-left: 10px">
          GPU_percent
        </div>
      </div>
    </div>
  </template>
<script>

import axios from "axios";
import ip from "@/components/ip";
import { Area } from '@antv/g2plot';
import moment from 'moment';

export default {
  name: "uploadPageCloud",
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三十天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近九十天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: '',
      graphData: [],
      st:'',
      et:''
    }

  },
  methods: {
    dc(){
      this.st = moment(this.value2[0]).format('YYYY-MM-DD HH:mm:ss'),
      this.et = moment(this.value2[1]).format('YYYY-MM-DD HH:mm:ss'),
      this.getDiskData(),
      this.getMemoryData(),
      this.getTotalCpuData(),
      this.getGpuData()
    },
    getDiskData() {
      let dataArray = []
      let cnt = 1;

      axios.get(ip + '/perf/time?start_time=' + this.st +'&end_time=' + this.et).then(res =>{
        for (var i=0;i<res.data.length;i++)
        {
          dataArray.push({
            timePeriod: moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss'),
            value: res.data[i].server_disk_used
          })
          // console.log(moment(res.data[0].time).format('YYYY-MM-DD HH:mm:ss')),
          // console.log(res.data[0].server_disk_used)
        }
        console.log(dataArray)
      })

      const area = new Area('disk_container', {
        data: dataArray.slice(0, cnt),
        xField: 'timePeriod',
        yField: 'value',
        xAxis: {
          range: [0, 1],
        },
      });
      area.render();
      const interval_disk2 = setInterval(() => {
      if (cnt === dataArray.length) {
        // clearInterval(interval);
      } else {
        cnt += 1;
        area.changeData(dataArray.slice(0, -1));
      }
      }, 300);
      // this.$on('hook:destroyed',()=>{
      //     window.removeEventListener("resize", function() {
      //       myChart.resize();
      //     });
      // })
    },
    // getDiskData() {
    //   let dataArray = []
    //   let cnt = 1;
    //   const interval_disk = setInterval(() => {
    //     axios.get(ip + '/perf/time?start_time=' + this.st +'&end_time=' + this.et).then(res =>{
    //       for (var i=0;i<res.data.length;i++)
    //       {
    //         dataArray.push({
    //           timePeriod: moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss'),
    //           value: res.data[i].server_disk_used
    //         })
    //       }
    //       console.log(dataArray)
    //     })
    //   }, 10000);
    //   const area = new Area('disk_container', {
    //     data: dataArray.slice(0, cnt),
    //     xField: 'timePeriod',
    //     yField: 'value',
    //     xAxis: {
    //       range: [0, 1],
    //     },
    //   });
    //   area.render();
    //   const interval_disk2 = setInterval(() => {
    //   if (cnt === dataArray.length) {
    //     // clearInterval(interval);
    //   } else {
    //     cnt += 1;
    //     area.changeData(dataArray.slice(0, -1));
    //   }
    //   }, 10000);
    // },
    getMemoryData() {
      let dataArray = []
      let cnt = 1;
        axios.get(ip + '/perf/time?start_time=' + this.st +'&end_time=' + this.et).then(res =>{
          for (var i=0;i<res.data.length;i++)
          {
            dataArray.push({
              timePeriod: moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss'),
              value: res.data[i].server_memory_used
            })
            // console.log(moment(res.data[0].time).format('YYYY-MM-DD HH:mm:ss')),
            // console.log(res.data[0].server_disk_used)
          }
          console.log(dataArray)
        })
        const area = new Area('memory_container', {
        data: dataArray.slice(0, cnt),
        xField: 'timePeriod',
        yField: 'value',
        xAxis: {
          range: [0, 1],
        },
      });
      area.render();
      const interval_disk2 = setInterval(() => {
      if (cnt === dataArray.length) {
        // clearInterval(interval);
      } else {
        cnt += 1;
        area.changeData(dataArray.slice(0, -1));
      }
      }, 300);
    },
    getTotalCpuData() {
      let dataArray = []
      let cnt = 1;
        axios.get(ip + '/perf/time?start_time=' + this.st +'&end_time=' + this.et).then(res =>{
          for (var i=0;i<res.data.length;i++)
          {
            dataArray.push({
              timePeriod: moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss'),
              value: res.data[i].server_cpu_total_used
            })
            // console.log(moment(res.data[0].time).format('YYYY-MM-DD HH:mm:ss')),
            // console.log(res.data[0].server_disk_used)
          }
          console.log(dataArray)
        })
        const area = new Area('totalCpu_container', {
        data: dataArray.slice(0, cnt),
        xField: 'timePeriod',
        yField: 'value',
        xAxis: {
          range: [0, 1],
        },
      });
      area.render();
      const interval_disk2 = setInterval(() => {
      if (cnt === dataArray.length) {
        // clearInterval(interval);
      } else {
        cnt += 1;
        area.changeData(dataArray.slice(0, -1));
      }
      }, 300);
    },
    getGpuData() {
      let dataArray = []
      let cnt = 1;
        axios.get(ip + '/perf/time?start_time=' + this.st +'&end_time=' + this.et).then(res =>{
          for (var i=0;i<res.data.length;i++)
          {
            dataArray.push({
              timePeriod: moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss'),
              value: res.data[i].server_gpu_used
            })
            // console.log(moment(res.data[0].time).format('YYYY-MM-DD HH:mm:ss')),
            // console.log(res.data[0].server_disk_used)
          }
          console.log(dataArray)
        })
        const area = new Area('gpu_container', {
        data: dataArray.slice(0, cnt),
        xField: 'timePeriod',
        yField: 'value',
        xAxis: {
          range: [0, 1],
        },
      });
      area.render();
      const interval_disk2 = setInterval(() => {
      if (cnt === dataArray.length) {
        // clearInterval(interval);
      } else {
        cnt += 1;
        area.changeData(dataArray.slice(0, -1));
      }
      }, 300);
    },
  },
}
</script>

<style scoped>
.card {
  position: relative;
  width: 900px;
  max-width: 100%;
  padding: 60px 35px 0;
  margin: 15px auto;
  overflow: hidden;
}

.title {
  font-size: 26px;
  margin: 5px auto 40px auto;
  text-align: center;
  font-weight: bold;
}
.block{
  margin-left: 10px;
}
</style>
